<template>
    <div style="padding-top: 15px; background: rgb(244,244,246);">
        <!-- 时间区间 -->
        <el-date-picker
            v-model="selectTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>

        <el-card>

            <div style="display: flex; justify-content: space-between;width: 300px; ">
                <div class="smallFont" style="margin-bottom: 15px;">微信跟进客户数：</div>
                <div class="bigFont">{{customesNum}}</div>
            </div>
            <div style="display: flex; justify-content: space-between;">
                <div class="tabHeader">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="发起申请数" name="first">
                            <div class="cavasbox" ref="SCEchart1"></div>
                        </el-tab-pane>
                        <el-tab-pane label="新增客户数" name="second">
                            <div class="cavasbox" ref="SCEchart2"></div>
                        </el-tab-pane>
                        <el-tab-pane label="聊天信息总数" name="third">
                            <div class="cavasbox" ref="SCEchart3"></div>
                        </el-tab-pane>
                        <el-tab-pane label="发送信息数" name="fourth">
                            <div class="cavasbox" ref="SCEchart4"></div>
                        </el-tab-pane>
                        <el-tab-pane label="已回复聊天占比" name="fifth">
                            <div class="cavasbox" ref="SCEchart5"></div>
                        </el-tab-pane>
                        <el-tab-pane label="平均首次回复时长" name="sixth">
                            <div class="cavasbox" ref="SCEchart6"></div>
                        </el-tab-pane>
                        <el-tab-pane label="删除/拉黑成员的客户数" name="seventh">
                            <div class="cavasbox" ref="SCEchart7"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-card>

        <!--        <el-card>-->
        <!--            <div style="display: flex; justify-content: space-between; width: 1000px;">-->
        <!--                <div>-->
        <!--                    <div class="smallFont" style="margin-bottom: 15px;">呼叫跟进</div>-->
        <!--                    <div class="bigFont">0</div>-->
        <!--                </div>-->

        <!--                <div class="tabHeader">-->
        <!--                    <div @click="tabs1(0)" :class="tab1 == '0'?'blue' : ''">呼出总数</div>-->
        <!--                    <div @click="tabs1(1)" :class="tab1 == '1'?'blue' : ''">接通数</div>-->
        <!--                    <div @click="tabs1(2)" :class="tab1 == '2'?'blue' : ''">通话时长</div>-->
        <!--                    <div @click="tabs1(3)" :class="tab1 == '3'?'blue' : ''">有效通话时长</div>-->
        <!--                    <div @click="tabs1(4)" :class="tab1 == '4'?'blue' : ''">有效通话量</div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="cavasbox" ref="SUMEchart"></div>-->
        <!--        </el-card>-->
    </div>
</template>

<script>
    import Chart from "echarts";

    export default {
        data() {
            return {
                selectTime: [],
                activeName: 'first',
                customesNum: 0,
                empList: [],
                // 第一个图表
                SCEoption: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}月 : {c}"
                    },
                    legend: {
                        data: [{
                            name: '',
                            icon: 'rect'
                        }],
                        top: 1,
                        left: 1,
                        itemGap: 10,
                        itemWidth: 12,
                        itemHeight: 12,
                        textStyle: {
                            fontSize: 12,
                            color: "#323232"
                        }
                    },
                    grid: {
                        left: 50,
                        right: 10,
                        top: 30,
                        bottom: 30,
                        borderWidth: 1
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            height: 70,
                            interval: 0,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        barGap: 0,
                        data: [],
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new Chart.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new Chart.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        }
                    }]
                },
                //  第二个图表
                SUMoption: {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}日 : {c}"
                    },
                    legend: {
                        data: [{
                            name: '',
                            icon: 'rect'
                        }],
                        top: 1,
                        left: 1,
                        itemGap: 10,
                        itemWidth: 12,
                        itemHeight: 12,
                        textStyle: {
                            fontSize: 12,
                            color: "#323232"
                        }
                    },
                    grid: {
                        left: 50,
                        right: 10,
                        top: 30,
                        bottom: 30,
                        borderWidth: 1
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            height: 70,
                            interval: 0,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1
                            }
                        },
                        axisLabel: {
                            margin: 14,
                            textStyle: {
                                fontSize: 10,
                                color: "#999999"
                            }
                        }
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        // type: 'line',
                        barGap: 0,
                        data: [],
                        barWidth: 10,
                        itemStyle: {
                            color: "#108ff9"
                        }
                    }]
                },

                // 第一个图表字段样式
                tab: '0',
                // 第二个图表字段样式
                tab1: '0',
            }
        },
        methods: {
            aa() {
                let result = []
                for (let i = 15; i >=1; i--) {
                    result.push(this.$moment().subtract(i, "days").format("YYYY-MM-DD"))
                }
                return result
            },
            // 第一个图表
            getSCE() {
                let that = this
                let new_apply_cnt = [],
                    new_contact_cnt = [],
                    chat_cnt = [],
                    message_cnt = [],
                    reply_percentage = [],
                    avg_reply_time = [],
                    negative_feedback_cnt = []
                that.SUMoption.xAxis.data = that.aa()
                let dataTime = {'startTime':that.aa()[0],'endTime':that.aa()[14]}
                that.$request("/api/wxFollowUp/getChats/1_0", dataTime, "POST").then((data) =>{
                    let listData = data.data
                    for(let i=0;i<listData.length;i++){
                        let item = listData[i]
                        new_apply_cnt.push(item.new_apply_cnt)
                        new_contact_cnt.push(item.new_contact_cnt)
                        chat_cnt.push(item.chat_cnt)
                        message_cnt.push(item.message_cnt)
                        reply_percentage.push(item.reply_percentage)
                        avg_reply_time.push(item.avg_reply_time)
                        negative_feedback_cnt.push(item.negative_feedback_cnt)
                    }
                }).then(() => {
                    that.SUMoption.series[0].data = new_apply_cnt;
                    that.chart1 = Chart.init(that.$refs.SCEchart1)
                    let sum1 = that.SUMoption
                    that.chart1.setOption(sum1)

                    that.chart2 = Chart.init(that.$refs.SCEchart2)
                    that.SUMoption.series[0].data = new_contact_cnt;
                    let sum2 = that.SUMoption
                    that.chart2.setOption(sum2)

                    that.chart3 = Chart.init(that.$refs.SCEchart3)
                    that.SUMoption.series[0].data = chat_cnt;
                    let sum3 = that.SUMoption
                    that.chart3.setOption(sum3)

                    that.chart4 = Chart.init(that.$refs.SCEchart4)
                    that.SUMoption.yAxis.data = message_cnt;
                    let sum4 = that.SUMoption
                    that.chart4.setOption(sum4)

                    that.chart5 = Chart.init(that.$refs.SCEchart5)
                    that.SUMoption.series[0].data = reply_percentage;
                    let sum5 = that.SUMoption
                    that.chart5.setOption(sum5)

                    that.chart6 = Chart.init(that.$refs.SCEchart6)
                    that.SUMoption.series[0].data = avg_reply_time;
                    let sum6 = that.SUMoption
                    that.chart6.setOption(sum6)

                    that.chart7 = Chart.init(that.$refs.SCEchart7)
                    that.SUMoption.series[0].data = negative_feedback_cnt;
                    let sum7 = that.SUMoption
                    that.chart7.setOption(sum7)
                })
            },

            queryDataHandle() {
                let payData = {
                    deptId: this.deptId
                }
                let that = this
                this.$request("/api/emp/getEmpList/1_0", payData, "POST").then((data) => {
                    this.empList = data.rows
                }).then(() => {
                    for (let i = 0; i < this.empList.length; i++) {
                        let item = this.empList[i]
                        let empData = {
                            empId: item.empId
                        }
                        that.$request("/api/customers/getCustomersByParams/1_0", empData, 'POST').then((data) => {
                            this.customesNum += data.rows.length
                        })
                    }
                });
            },
            // 第一个图表字段添加样式
            tabs(index) {
                this.tab = index;
            },

        },

        mounted() {
            this.queryDataHandle()
            this.getSCE()
        },
        name: "AnalyzeFollow"
    }
</script>

<style scoped>
    .el-card {
        margin-top: 15px;
    }

    /deep/ .el-card__body {
        padding: 10px 12px;
    }


    .cavasbox {
        box-sizing: border-box;
        width: 1580px;
        height: 320px;
    }

    .smallFont {
        font-weight: 600;
        font-size: 16px;
    }

    .bigFont {
        font-weight: 700;
        font-size: 40px;
    }

    .tabHeader {
        display: flex;
        justify-content: space-between;
    }

    .tabHeader > div {
        height: 400px;
        padding: 5px 10px;
        border-radius: 20px;
    }

    .blue {
        color: #fff;
        background: rgb(52, 112, 255);
    }
</style>
